<%@ page contentType="text/html; charset=utf-8" language="java" errorPage="" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>SMALL SITE, BIG-NEWs</title>
<link href="res/jquery-ui-1.7.2.custom.css" rel="stylesheet" type="text/css" />
<link href="res/common.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="res/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="res/jquery-ui-1.7.2.min.js"></script>
<script type="text/javascript" src="res/jquery.cookie.js"></script>
<script type='text/javascript' src='dwr/interface/newsDwr.js'></script>
<script type='text/javascript' src='dwr/engine.js'></script>
<style type="text/css">
<!--
body {
	margin: 0;
	padding: 0;
	background-color: #fffff0;
	font: 0.75em Tahoma, Geneva, sans-serif;
}
#cmt-form {
	float: left;
	margin: 0.25em;
}
#cmt-form input[type=text] {
	width: 12em;
}
#comments {
	height: 45px;
	overflow: auto;
}
-->
</style>
<script type="text/javascript">
$(function(){
	p.loadComments();
	p.intHandler = window.setInterval('p.loadComments();', 15000);
});
var newsId = '${param.id}';
var p = {
	intHandler: null,
	cMap: {}, // key: Comment.content, value: Comment
	cIdx: {}, // comment Index. key: Comment.id, value: Comment
	raisingComments: [], // 记录自从上次评论更新后的顶过的评论id
	newComments: [], // 记录自从上次评论更新后用户增加的新评论
	postComment: function() {
		var c = $.trim($('#cinput_').val());
		if(c) {
			if(c.length > 140) {
				alert('评论太长啦，长话短说吧');
				return false;
			}
			this.add(c);
			$('#cinput_').val('');
		}
		return false;
	},
	add: function(comment) {
		var c = this.cMap[comment];
		if(c) {
			this.raiseComment(c.id);
		} else {
			window.clearInterval(this.intHandler);
			
			c = {newsId: newsId, content: comment, raiseCount: 0, id: 1, createTime: new Date()};
			//newsDwr.postComment(c);
			this.newComments.push(c);
			this.cMap[comment] = c;
			this.cIdx[c.id] = c;
			var html='<span id="cmt_'+ c.id +'" class="comment ui-state-active ui-corner-all fs0">'+ c.content +'</span>';
			$('#comments').prepend(html);

			p.loadComments();
			p.intHandler = window.setInterval('p.loadComments();', 15000);
		}
		$('#cmt_'+ c.id).effect('highlight', {}, 'slow');
		return this;
	},
	loadComments: function() {
		newsDwr.getComments(newsId, this.newComments, this.raisingComments, function(comments){
			p.showComments(comments);
			p.newComments = [];
			p.raisingComments = [];
		});
		return this;
	},
	showComments: function(comments) {
		var html = '';
		var cmap = {};
		var cidx = {};
		for(var i=0, j=comments.length; i<j; i++) {
			var c = comments[i];
			cmap[c.content] = c;
			cidx[c.id] = c;
			html += this.genCommentHtml(c);
		}
		
		this.cMap = cmap;
		this.cIdx = cidx;
		$('#comments').html(html);
		$('#comments .comment').effect('highlight', {}, 'slow');
		return this;
	},
	genCommentHtml: function(c) {
		var d = ($.cookie('cmt_'+ c.id) == 'Y')
			? ('['+ c.raiseCount +']')
			: ('<a href="javascript:p.raiseComment('+ c.id +')">顶</a>');
		return '<span id="cmt_'+ c.id +'" class="comment ui-state-default ui-corner-all '
			+ this.getCommentSize(c.raiseCount) +'">'+ c.content.replace(/</g,'&lt;').replace(/>/g,'&gt;')
			+'<span class="comment-up ui-corner-right">'+ d +'</span></span>';
	},
	// 根据顶的次数返回评论的字体大小的类
	getCommentSize: function(c) {
		if(c < 4)
			return 'fs0';
		else if(c < 7)
			return 'fs1';
		else if(c < 10)
			return 'fs2';
		else if(c < 14)
			return 'fs3';
		else if(c < 19)
			return 'fs4';
		else if(c < 24)
			return 'fs5';
		else if(c < 30)
			return 'fs6';
		else if(c < 38)
			return 'fs7';
		else if(c < 50)
			return 'fs8';
		else
			return 'fs9';
	},
	raiseComment: function(commentId) {
		var c = this.cIdx[commentId];
		if(c) {
			$('#cmt_'+ c.id).removeClass('ui-state-default').addClass('ui-state-active')
				.children('.comment-up').text('['+ ++c.raiseCount +']');
			this.raisingComments.push(c.id);
			$.cookie('cmt_'+ c.id, 'Y', {expires: 1});
		}
	}
};
</script>
</head>

<body>
<form id="cmt-form" onsubmit="p.postComment();return false;">
	<input id="cinput_" class="text" type="text" /> <input type="submit" value="评论"/>
</form>
<div id="comments" class="comments"></div>
</body>
</html>